<template>
	<div class="wrap">
		<h1 class="title">我的留言</h1>
		<el-button class="btn" type="primary" plain @click="showAddDialog = true"> 发布留言 </el-button>


		<!-- 间隔 -->
		<el-space :size="20" :wrap="true" class="showList">
			<template v-for="item in msg" :key="item">
				<MessageCard :time="item.createTime" :title="item.readStatus" :containt="item.content" :msg-id="item.msgId">
					<template #btn>
						<el-button link type="primary" @click="handleModClick(item)">编辑</el-button>
						<el-button link type="danger" @click="handleDelClick(item)">撤销</el-button>
					</template>
				</MessageCard>
			</template>
		</el-space>
		<!-- 分页 -->
		<el-row class="pagination">
			<el-pagination
				v-model:current-page="currentPage"
				v-model:page-size="pageSize"
				:page-sizes="pageSizes"
				small="small"
				:background="true"
				layout="total,size, prev, pager, next"
				:total="total"
				@size-change="handelPageSizeChange"
				@current-change="handleCurrentChange" />
		</el-row>

		<!-- 删除对话框 -->
		<DeleteDialog v-model:show="showDelDialog">
			<template #containt> 编号为{{ delTarget.msgId }} 的留言 </template>
			<template #btn>
				<el-button type="primary" link @click="handleDelWords" >确认删除</el-button>
				<el-button type="warning" link @click="showDelDialog = false">取消</el-button>
			</template>
		</DeleteDialog>

		<!-- 编辑对话框 -->
		<el-dialog v-model="showModDialog" width="400">
			<el-form label-position="top" label-width="60">
				<el-form-item label="留言编号：">
					<el-input :value="modTarget.msgId" readonly />
				</el-form-item>
				<el-form-item label="留言内容：">
					<el-input
						v-model.trim="modTarget.content"
						type="textarea"
						maxlength="200"
						resize="none"
						:autosize="{ minRows: 2, maxRows: 6 }" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button type="primary" plain size="small" @click="handleModWords">确认修改</el-button>
				<el-button type="danger" plain size="small" @click="showModDialog = false">取消</el-button>
			</template>
		</el-dialog>

		<!-- 发布留言对话框 -->
		<el-dialog v-model="showAddDialog" width="400">
			<el-form label-position="top" label-width="60">
				<el-form-item label="留言内容：">
					<el-input
						v-model="content"
						type="textarea"
						maxlength="200"
						resize="none"
						:autosize="{ minRows: 2, maxRows: 6 }" />
				</el-form-item>
			</el-form>
			<template #footer>
				<el-button type="primary" plain size="small" @click="handleSubmitWords">确认发布</el-button>
				<el-button type="danger" plain size="small" @click="showAddDialog = false">取消</el-button>
				
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import {
	queryMessageOneSelf,
	updateMessageInfoByStu,
	deleteMessageInfoByStu,
	addMessageInfoByStu,
} from '@/utils/axios/stuReqest'
import { onMounted, ref } from 'vue'
import MessageCard from '@/components/mod/MessageCard.vue'
import DeleteDialog from '@/components/dialog/DeleteDialog.vue'
import { debounce } from '@/utils/tools'

// 分页
const pageSizes = ref([10, 20, 30])
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 显示删除对话框
const showDelDialog = ref(false)
// 显示编辑对话框
const showModDialog = ref(false)
// 显示添加对话框
const showAddDialog = ref(false)

// 修改目标
const modTarget = ref()
// 删除目标
const delTarget = ref()
// 发布留言内容
const content = ref()

const msg = ref([])

// 发布留言
const handleSubmitWords = debounce(async () => {
	await addMessageInfoByStu({ content: content.value })
	init().then(() => (content.value = ''))
	showAddDialog.value = false
})

// 处理删除留言
const handleDelWords = debounce(async () => {
	await deleteMessageInfoByStu({ msgId: parseInt(delTarget.value.msgId) })
	let { data } = await queryMessageOneSelf({ currentPage: currentPage.value, pageSize: pageSize.value })
	init()
	msg.value = data
	showDelDialog.value = false
})
const handleModWords = debounce(async () => {
	modTarget.value.msgId=parseInt(modTarget.value.msgId)
	await updateMessageInfoByStu(modTarget.value)
	let { data } = await queryMessageOneSelf({ currentPage: currentPage.value, pageSize: pageSize.value })
	msg.value = data
	showModDialog.value = false
})

// 处理修改点击事件
const handleModClick = (val) => {
	modTarget.value = val
	showModDialog.value = true
}
// 处理删除点击事件
const handleDelClick = (val) => {
	delTarget.value = val
	showDelDialog.value = true
}

// 处理当前页变化
const handleCurrentChange = async (val) => {
	let { data } = await getNoticeList({ currentPage: val, pageSize: pageSize.value })
	noticeList.value = data
}

const handelPageSizeChange = async (val) => {
	let { data } = await getNoticeList({ currentPage: currentPage.value, pageSize: val })
	noticeList.value = data
}

async function init() {
	let { data } = await queryMessageOneSelf({ currentPage: currentPage.value, pageSize: pageSize.value })
	msg.value = data
	total.value = data.length
}
onMounted(async () => {
	await init()
})
</script>

<style scoped lang="scss">
.showList {
	margin-top: 20px;
}
.btn{
	position: absolute;
	top: 10px;
	right: 10px;
}

.pagination{
	position:absolute;
}
</style>
